import { Component, OnInit,Input,Output,SimpleChanges ,ElementRef,ViewChild,ViewEncapsulation,EventEmitter} from '@angular/core';

@Component({
  selector: 'el-radio-button',
  template: `
    <label #self class="el-radio-button">
   
        <input #radio class="el-radio-button__orig-radio" [value]="label" type="radio" (change)='handleChange($event)'  (focus)="handleFocus()" (blur)="handleBlur()" [name]="name" [disabled]="disabled">
   
        <span #radio_btn_inner class="el-radio-button__inner" >
            {{label}}
            <ng-content></ng-content>
        
        </span>
    </label>
  `,
  styleUrls: ['./el-radio.component.css','./radio-button.css'],
  encapsulation:ViewEncapsulation.None
})
export class ElRadioButtonComponent implements OnInit {

    

    // @Input() value:any={};
    @Input() label:string|number;
    @Input() disabled:boolean;
    @Input() name:string;

    @Input() model:string|number
    @Output() modelChange:EventEmitter<any>=new EventEmitter<any>()


    // 从el-radio-group继承而来
    @Input() value:any;
    @Input() size:string;
    @Input() fill:string='#20a0ff';
    @Input() textColor:string='#ffffff'
    
    

    @ViewChild('self') self:ElementRef;
    @ViewChild('radio') radio:ElementRef
    @ViewChild('radio_btn_inner') radio_btn_inner:ElementRef


    focus:boolean=false;
    isGroup:boolean;
    
    _radioGroup:any
    constructor() { }

    ngOnInit() {
        this.getIsGroup();

    }
    ngOnChanges(changes:SimpleChanges){
        // console.log(changes)
        if(changes['model']){
            if(changes['model'].currentValue===this.label){
                this.radio.nativeElement.checked=true
            }else{
                this.radio.nativeElement.checked=false;
                // this.radio_btn_inner.nativeElement.className=this.radio_btn_inner.nativeElement.className.replace('is-active','')
                this.radio_btn_inner.nativeElement.style=''
            }
        };
        if(changes['disabled']){
            // this.getDisabled();
        }
        this.setClass()
    }
    handleChange(e){
        // console.log(e)
        if(this.radio.nativeElement.checked){
            this.model=this.label;
            this.modelChange.emit(this.model)
        }
    }
    handleFocus(){
        this.focus=true;
       
    }
    handleBlur(){
        this.focus=false;
       
    }

    setClass(){
        let classList=['el-radio-button'];
        if(this.disabled){
            classList.push('is-disabled');
        }
        if(this.model===this.label){
            classList.push('is-checked');
        }
        if(this.value===this.label){
            classList.push('is-active');
            let radio_btn_inner_element=this.radio_btn_inner.nativeElement
            radio_btn_inner_element.style.backgroundColor=this.fill||'';
            radio_btn_inner_element.style.borderColor=this.fill||"";
            radio_btn_inner_element.style.boxShadow=this.fill?`-1px 0 0 0 ${this.fill}`:'';
            radio_btn_inner_element.style.color=this.textColor||''

        }
        if(this.size){
            classList.push(`el-radio-button--${this.size}`)
        }
        this.self.nativeElement.className=classList.join(' ');
    }

    getIsGroup(){
        let parent=this.self.nativeElement.parentNode;

        while(parent){
            if(parent.tagName==='EL-RADIO-GROUP'){
                this._radioGroup=parent;
                this.isGroup= true;
                return;
            }else{
                parent=parent.parentNode
            }
        }
        this.isGroup=false;
    }

    


    

}
